import React, {useState}from 'react'
import {StyleSheet,  View, Text, TextInput, Button } from 'react-native'
import { themes } from '../../theme';
import { pxToPt } from '../../utils'

export default function index(props) {
  const [value, setValue] = useState('');
  const {style={}, onSubmitEditing, showResult} = props
  const onChangeText = (e) => {
    setValue(e)
  }
  if(value.length===0) {
    showResult(false)
  }
  return (
    <View style={{...styles.container}}>
      <TextInput 
       style={{...styles.inputStyle, ...style}}
       value={value}
       onChangeText={onChangeText.bind(this)}
       placeholder='search'
       onSubmitEditing={() => onSubmitEditing && onSubmitEditing(value)}
       /> 
      <Button onPress={() => onSubmitEditing && onSubmitEditing(value)} title="搜索" />
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    height: pxToPt(40),
    backgroundColor: '#CCCCCC',
    flexDirection: 'row',
    alignItems:'center',
    borderRadius: pxToPt(15),
    justifyContent: 'space-evenly',
    paddingLeft: pxToPt(10),
    paddingRight: pxToPt(10)
  },
  inputStyle: {
    flex: 1,
  }
})